<template>
  <div>
    <v-form v-model="valid">
      <v-container>
        <v-row>
          <v-col cols="12" md="4">
            <v-text-field
              v-model="title"
              :rules="nameRules"
              :counter="30"
              label="标题"
              required
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

    <mavon-editor
      id="mavon-editor"
      v-model="content"
      :subfield="prop.subfield"
      :defaultOpen="prop.defaultOpen"
      :toolbarsFlag="prop.toolbarsFlag"
      :editable="prop.editable"
      :scrollStyle="prop.scrollStyle"
      :toolbars="prop.toolbars"
      class="mx-2"
    ></mavon-editor>

    <v-container>
      <v-text-field v-model="imgurl">
        <template v-slot:label>
          <strong>图片</strong> 的路径
          <v-icon style="vertical-align: middle"> mdi-file-find </v-icon>
        </template>
      </v-text-field>
    </v-container>

    <v-card class="mx-2">
      <v-card-text>
        <h2 class="text-h6 mb-2">选择标签</h2>

        <v-chip-group v-model="neighborhoods" column multiple>
          <v-chip
            filter
            outlined
            v-for="(tag, index) in taglist"
            :key="index"
            :value="tag.id"
          >
            {{ tag.tagName }}
          </v-chip>
        </v-chip-group>
      </v-card-text>
    </v-card>

    <v-btn
      :loading="loading"
      :disabled="loading"
      color="blue-grey"
      class="ma-2 white--text"
      @click="upload"
    >
      Upload
      <v-icon right dark> mdi-cloud-upload </v-icon>
    </v-btn>

    <!-- 这里是消息提示框 -->
    <v-snackbar v-model="snackbar" timeout="3000" color="grey darken-3">
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  name: "newArcticle",
  data() {
    return {
      content: ``,
      loader: null,
      loading: false,
      neighborhoods: [],
      valid: false,
      id: null,
      title: "",
      imgurl: "",
      taglist: [],

      snackbar: false,
      text: "",

      nameRules: [
        (v) => !!v || "标题是必须要填写的",
        (v) => v.length <= 30 || "标题要小于30个字",
      ],
    };
  },
  methods: {
    upload() {
      if (
        this.title.length === 0 ||
        this.content.length === 0 ||
        this.neighborhoods.length === 0
      ) {
        this.showTipMsg("请完善信息");
        return;
      }

      this.loader = "loading";

      if (this.$route.query.id) {
        this.$axios
          .post("/arcticle/modify", {
            id: this.id,
            title: this.title,
            content: this.content,
            taglist: this.neighborhoods,
            imgurl: this.imgurl,
          })
          .then((resp) => {
            this.showTipMsg(resp.data.msg);
            this.loading = false;
          });
      } else {
        // 当admin没有输入imgurl 自动填入猫猫
        if (this.imgurl.length===0) {
          this.imgurl =
            "https://i0.hippopx.com/photos/268/590/438/hedgehog-animal-baby-cute-preview.jpg";
        }
        this.$axios
          .post("/arcticle/addarcticle", {
            title: this.title,
            content: this.content,
            taglist: this.neighborhoods,
            imgurl: this.imgurl,
          })
          .then((resp) => {
            this.showTipMsg(resp.data.msg);
            this.loading = false;
            // 添加后清空
            setTimeout(() => {
              this.title = "";
              this.content = "";
              this.neighborhoods = [];
              this.imgurl = "";
            }, 1500);
          });
      }
    },
    showTipMsg(msg) {
      this.text = msg;
      this.snackbar = true;
    },
  },
  watch: {
    loader() {
      const l = this.loader;
      this[l] = !this[l];
      setTimeout(() => (this[l] = false), 3000);
      this.loader = null;
    },
  },
  computed: {
    prop() {
      let data = {
        subfield: true, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: true,
        toolbarsFlag: true,
        scrollStyle: true,
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: false, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: false, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
      };
      return data;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      var id = this.$route.query.id;

      this.$axios.get("/arcticle/getArcticleById/" + id).then((response) => {
        this.id = id;
        this.title = response.data.title;
        this.content = response.data.content;
        this.imgurl = response.data.imgurl;
        response.data.tagList.forEach((tag) => {
          this.neighborhoods.push(tag.id);
        });
      });
    }

    this.$axios.get("/tag/alltag").then((response) => {
      this.taglist = response.data.data;
    });
  },
};
</script>

<style scoped>
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
}
@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>